<template>
  <div class="myTimetable">
    <!-- 标题 -->
    <el-row class="header">
      <el-col :span="2" class="headerImg">
        <img src="../assets/left.png" alt />
      </el-col>
      <el-col :span="22" class="headerTitle">{{title}}</el-col>
    </el-row>
    <!--日历-->
    <div class="riliwrap">
      <div class="rili">
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
      </div>
      <el-row class="riliCtrl">
        <el-col :span="19" :offset="1" class="riliCtrlMonth">
          <img src="../assets/sanjiaoxing@2x.png" alt />
          <p>2019-9</p>
        </el-col>
        <el-col :span="3" :offset="1" class="riliCtrlDay">
          <img src="../assets/rili3@2x.png" alt />
        </el-col>
      </el-row>
      <el-row class="rilinum">
        <el-col :span="3" class="rilinumList">
          <p>日</p>
          <p>04</p>
        </el-col>
        <el-col :span="3" class="rilinumList">
          <p>一</p>
          <p>04</p>
        </el-col>
        <el-col :span="3" class="rilinumList">
          <p>二</p>
          <p>05</p>
        </el-col>
        <el-col :span="3" class="rilinumList">
          <p>三</p>
          <p>06</p>
        </el-col>
        <el-col :span="3" class="rilinumList active">
          <p>四</p>
          <p>07</p>
        </el-col>
        <el-col :span="3" class="rilinumList">
          <p>五</p>
          <p>08</p>
        </el-col>
        <el-col :span="3" class="rilinumList">
          <p>六</p>
          <p>09</p>
        </el-col>
      </el-row>
    </div>
    <!--课程任务-->
    <el-row class="task">
      <el-col :span="16" class="taskLeft">
        <p>班主任综合带班能力提升2019精英班</p>
        <span>------ 第二讲</span>
      </el-col>
      <el-col :span="8" class="taskRight">
        <p class="taskTips" v-if="flag" :style="{color:activeColor,}">请准时上课</p>
        <p class="taskTime">2019年9月8号 &nbsp; 14:00</p>
      </el-col>
    </el-row>
    <el-row class="task">
      <el-col :span="16" class="taskLeft">
        <p>班主任综合带班能力提升2019精英班</p>
        <span>------ 第二讲</span>
      </el-col>
      <el-col :span="8" class="taskRight">
        <p class="taskTips" v-if="flag" :style="{color:activeColor,}">请准时上课</p>
        <p class="taskTime">2019年9月8号 &nbsp; 14:00</p>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  name: "myTimetable",
  data() {
    return {
      title: "我的课程表",
      flag: true,
      activeColor: "#f7d672"
    };
  }
};
</script>
<style lang="less" scoped>
* {
  font-size: 0.14rem;
}
// 课程任务

.myTimetable {
  height: 100%;
  background: #f8f8f8;
  .task {
    height: 1.1rem;
    margin-top: 0.2rem;
    background: #fff;
    margin-top: 0.3rem;
    .taskLeft {
      p {
        font-size: 0.2rem;
        color: rgb(49, 49, 49);
        height: 0.5rem;
        line-height: 0.5rem;
        margin-left: 0.2rem;
        font-weight: 600;
      }
      span {
        margin-left: 0.2rem;
        font-size: 0.18rem;
        color: rgb(49, 49, 49);
        margin-top: 0.26rem;
      }
    }
    .taskRight {
      p {
        height: 0.5rem;
        font-size: 0.18rem;
        line-height: 0.5rem;
      }
    }
  }
}
.header {
  background: #ffffff;
  height: 0.8rem;
  overflow: hidden;
  border-bottom: 1px solid #f8f8f8;
  .headerImg {
    height: 0.8rem;
    img {
      width: 0.3rem;
      height: 0.5rem;
      overflow: hidden;
      margin-top: 0.15rem;
      float: right;
    }
    // background: red;
  }
  .headerTitle {
    font-size: 0.26rem;
    line-height: 0.8rem;
    text-align: center;
    font-weight: 600;
  }
}
// 日历
.riliwrap {
  height: auto;
  background: #fff;
  border: 1px solid white;
  border-radius: 0.25rem;
  margin-top: 0.5rem;
  position: relative;
  .rili {
    width: 95%;
    margin: 0 0.25%;
    height: 1.2rem;
    position: absolute;
    top: -0.2rem;
    p {
      width: 0.2rem;
      height: 0.4rem;
      background: #4b7ff7;
      float: left;
      margin-left: 15%;
      border-radius: 0.08rem;
    }
  }
}
// 小日历
.riliCtrl {
  height: 0.75rem;
//   background: gray;
  margin: 0.35rem 5%;
  border-bottom: 1px solid #eef3ff;
  .riliCtrlMonth {
    height: 0.5rem;
    // background: #f8f8f8;
    img {
      margin: 0;
      padding: 0.13rem 0.2rem;
      width: 0.18rem;
      height: 0.24rem;
      overflow: hidden;
      float: left;
    }
    p {
      float: left;

      font-size: 0.18rem;
      font-weight: 600;
      line-height: 0.5rem;
    }
  }
  .riliCtrlDay {
    height: 0.5rem;
    img {
      width: 0.35rem;
      height: 0.35rem;
      padding: 0.075rem;
    }
  }
}
// 星期
.rilinum {
  height: 2.5rem;
  background: white;
  .rilinumList {
    width: 0.7rem;
    height: 1.65rem;

    padding: 0 0.1rem;
    margin: 0 2.45%;
    p {
      height: 0.825rem;
      line-height: 0.825rem;
      text-align: center;
    }
  }
}
.rilinum .rilinumList:first-child,
.rilinumList:last-child {
  color: #cccccc;
}
.active {
  box-shadow: #f6f8fd 1px 1px 1px 1px;
  border: 1px solid #f8f8f8;
  border-radius: 0.65rem;
  color: #4b7ff7;
}
</style>